<template>
  <div class="info">
    <div class="block">
    <el-card class="info-box">
      <div slot="header" class="clearfix">
        <span>我要分享</span>
      </div>
      <el-form label-width="100px" :model="article" ref="article" :rules="rules">
        <el-form-item class="title-box" label="文章标题：" prop="title" >
          <el-input v-model="article.title" type="textarea" autosize></el-input>
        </el-form-item>
        <el-form-item class="cont-box" label="文章内容：" prop="cont" >
          <el-input class="cont-input" v-model="article.cont" type="textarea" :autosize="{ minRows: 12}"></el-input>
        </el-form-item>
      </el-form>
      <div class="bu-box">
        <el-button class="button" @click="cancel">重置</el-button>
        <el-button class="button" type="primary" @click="add">确 定</el-button>
      </div>
    </el-card>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";

export default {
  data: function () {
    return {
      user: {},
      article: {},
      rules: {
        title: [
          {required: true, message: '标题不能为空！', trigger: 'blur'},
        ],
        cont: [
          {required: true, message: '内容不能为空！', trigger: 'blur'},
        ]
      }
    }
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      if (!sessionStorage.getItem("user")) {
        this.$message({
          showClose: true,
          type: 'error',
          message: '您还未登录，请登录分享文章！'
        });
        this.$router.push("/login")//页面跳转
      } else {
        this.user = JSON.parse(sessionStorage.getItem("user"))
      }
    },
    getCurrentDate() {
      let now = new Date();
      let yyyy = now.getFullYear();
      let MM = now.getMonth() + 1;
      let dd = now.getDate();
      let HH = now.getHours();
      let mm = now.getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
      let ss = now.getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
      return yyyy + "-" + MM + "-" + dd + " " + HH + ":" + mm + ":" + ss;
    },
    add() {
      this.$refs["article"].validate((valid) => {
        if (valid) {
          axios.post("api/article", qs.stringify({
            title: this.article.title,
            cont: this.article.cont,
            auid: this.user.id,
            time: this.getCurrentDate(),
            stat: 0,
            type: 3,
          })).then((res) => {
            if(res.data.code === '0') {
              this.$message({
                showClose: true,
                type: "success",
                message: "添加文章成功！",
              })
              this.$refs["article"].resetFields()
            }
            else{
              this.$message({
                showClose: true,
                type: "error",
                message: res.data.msg,
              })
            }
          })
        }
      })
    },
    cancel() {
      this.$refs["article"].resetFields()
    }
  }
}
</script>

<style scoped>
.info {
  width: 100%;
  min-height: 666px;
}

.block{
  width: 60%;
  position: relative;
  padding-top: 40px;
  padding-bottom: 60px;
  left: 50%;
  transform: translate(-50%, 0%);
}

.info-box {
  min-height: 550px;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
  border-radius: 25px;
}

/deep/ .el-card {
  border: 0 !important;
}

/deep/ .el-card__header {
  height: 50px;
  font-size: 17px;
  padding: 15px 20px;
  background-color: #354e66;
  font-weight: bold;
  color: #f9bf4b;
}

/deep/ .bu-box .el-form-item__content {
  margin-left: 0 !important;
}

.title-box {
  padding-top: 10px;
}

.title-box, .cont-box {
  padding: 20px;
  width: 700px;
  margin: auto;
  justify-content: center;
  text-align: left;
}

.el-form span {
  padding-left: 16px;
}

/deep/ .el-form-item__label:before {
  content: '' !important;
}

.bu-box {
  padding: 20px;
}

.button {
  width: 200px;
  height: 40px;
  margin: 0px 20px;
  color: #f9bf4b;
  font-size: 17px;
  font-weight: bold;
  background: #354e66;
}
</style>